import 'package:flutter/material.dart';
import 'package:wallpaper_app/pages/tools/rename/rename_screen.dart';
import 'package:wallpaper_app/tools/route_animation.dart';

class ToolsPage extends StatelessWidget {
  const ToolsPage({super.key});
  // 卡片的目标尺寸
  final double cardTargetSize = 80.0;
  // 卡片之间的间距
  final double cardSpacing = 8.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                // 计算个数 宽度/100 向下取整
                int crossAxisCount =
                    (constraints.maxWidth / cardTargetSize).floor();

                return GridView.count(
                  crossAxisCount: crossAxisCount,
                  childAspectRatio: 1, // 正方形
                  children: [
                    _buildFeatureCard(
                      context,
                      icon: Icons.drive_file_rename_outline,
                      title: '重命名',
                      color: Colors.blue,
                      onTap: () {
                        RouteAnimation()
                            .animateRoute(context, const FileRenameScreen());
                      },
                    ),
                  ],
                );
              }),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildFeatureCard(
    BuildContext context, {
    required IconData icon,
    required String title,
    required Color color,
    required VoidCallback onTap,
  }) {
    final theme = Theme.of(context).colorScheme;
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
      color: theme.primaryContainer,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(5),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 30,
              color: color,
            ),
            const SizedBox(height: 8),
            Text(
              title,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
                height: 1.2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
